<template>
	<view class="content">
		<!-- F1：状态栏 -->
		<myStatusbar />
		<!-- F2：自定义导航栏 -->
		<uni-nav-bar 
			title="智慧停车"
			backgroundColor="#090"
			color="#FFF"
			leftIcon="back"
			leftText="返回"
			rightIcon="flag"
			@clickLeft="goBack"
		/>
		<!-- F3：显示地图 -->
		<!-- 116.427212,39.989915
		 中心点经度和纬度
		 scale  缩放的级别  范围3~20
		 markers  用来在地图上标记点
		 -->
		<map
			longitude="116.415481"
			latitude="40.062143"
			class="parking-map"
			scale="14"
			:markers="mapMarkers"
			@markertap="doMarkerTap"
			id="parkingMap"
			:style="{height: mapHeight+'px'}"
		></map>
		<!-- F4：展开/隐藏图标 -->
		<uni-icons 
			:type="arrow ? 'bottom' : 'top'" 
			class="iconType"
			@click="hideShow"
		></uni-icons>
		<!-- F5：图表 -->
		<view class="parking-charts" :style="{height: chartHeight+'px'}">
			<!-- type 图表类型
				column 柱状图
				getIndex  获取点击数据下标
			 -->
			<qiun-data-charts 
				type="column" 
				:chartData="chartData" 
				ref="chart"
				@getIndex="clickChart"
			/>
		</view>
	</view>
</template>

<script>
	import { parkingZone } from '../../service'
	export default {
		data() {
			return {
				mapMarkers: [],   // 用于保存标记点
				chartData: {},  // 保存图表数据	
				chartHeight: 200,  //图表的高度
				mapHeight: 0,  // 控制地图高度
				arrow: true  // 控制图表是否显示
			}
		},
		async onLoad() {
			// 请求停车接口
			const data = await parkingZone()
			console.log(data)
			// 对接口返回的数据进行映射处理，最终得到一组新的数据，可以直接在地图上进行标记点
			this.mapMarkers = data.map(function(item) {
				return {
					id: item.zid,
					longitude: item.longitude,
					latitude: item.latitude,
					iconPath: '/static/img/loc.png',
					width: 40,
					height: 40,
					callout: { //气泡窗口
						content: `${item.zname}:${item.unoccupied}`,
						bgColor: '#090',
						color: '#FFF',
						borderRadius: 5
					}
				}
			})
			// 将接口的数据存储到图表
			this.chartData = {  // 保存图表数据
				categories: data.map(function(item){ return item.zname.substr(-2) }),
				series: [
					{
						name: "车位数",
						data: data.map(function(item){ return item.unoccupied })
					}
				]
			}
			// 获取手机屏幕的高度和状态栏的高度
			const {windowHeight,statusBarHeight} = uni.getSystemInfoSync()
			// 计算出地图的高度=屏幕高度-状态栏高度-导航栏的高度-切换按钮高度-图表的高度
			this.mapHeight = windowHeight-statusBarHeight-44-20-this.chartHeight
			
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			doMarkerTap(e) {
				// 获取标记点
				console.log(e.detail)
				// 创建地图上下文对象
				const context = uni.createMapContext('parkingMap',this)
				// 将地图的中心点移动到当前的标记点坐标
				context.moveToLocation({
					longitude: e.detail.longitude,
					latitude: e.detail.latitude
				})
			},
			hideShow() {
				// 让图表的高度来回切换 
				// 如果图表高度是200，点击隐藏，否则点击现实
				if(this.chartHeight===200) {
					this.chartHeight = 0
					this.arrow = false
				}else{
					this.chartHeight = 200
					this.arrow = true
				}
				// 重新绘制图表
				this.$refs.chart.reloading()
				// 重新计算地图高度
				const {windowHeight,statusBarHeight} = uni.getSystemInfoSync()
				this.mapHeight = windowHeight-statusBarHeight-44-20-this.chartHeight
			},
			// 图表点击
			clickChart(e) {
				// 获取当前点击的柱状图的下标
				var index = e.currentIndex.index
				console.log(index)
				// 判断点击的是否为柱状图
				if(index >= 0){
					// 通过下标获取地图上对应的坐标点数据，再从中获取经纬度
					var {longitude,latitude} = this.mapMarkers[index]
					console.log(longitude,latitude)
					// 将地图的中心点设置为获取经纬度位置
					// 创建地图上下文对象
					const context = uni.createMapContext('parkingMap',this)
					// 移动到经度度位置
					context.moveToLocation({
						longitude,
						latitude
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.parking-map {
		width: 750rpx;
		height: 450rpx;
	}
	.parking-charts {
		width: 750rpx;
		height: 300px;
	}
	.iconType {
		height: 20px;
	}
</style>
